<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <div class="title">酒店设备详情</div>
      </div>
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" :model="form.model" class="demo">
          <div class="form-section">
            <div class="form-section_title">基础信息</div>
            <div style="position: relative;">
              <div style="right: 10px;
    position: absolute;
    width: 150px;
    top: 10px;">
                <qrcode-vue :value="form.model.qrcodeUrl" size="150" level="H" />
              </div>
            </div>
            <AgelFormDesc :items="form.baseItems" :column="24"></AgelFormDesc>
          </div>
          <div class="form-section" v-if="form.model.deviceId">
            <div class="form-section_title">生产信息</div>
            <DeviceProd :deviceId="form.model.deviceId"></DeviceProd>
          </div>
          <!-- <div class="form-section">
            <div class="form-section_title">部署信息</div>
          </div> -->
          <div class="form-section" v-if="form.model.deviceId">
            <div class="form-section_title">维修信息</div>
            <DeviceMaintenance :deviceId="form.model.deviceId"></DeviceMaintenance>
          </div>
          <DeviceDatacard v-if="form.model.deviceId" :deviceId="form.model.deviceId"></DeviceDatacard>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="VendorDeviceInfo" lang="tsx">
import QrcodeVue from 'qrcode.vue';
import { getDevice } from '@/api/device/index';
import DeviceDatacard from '@/views/device/common/device-datacard/index.vue'
import DeviceProd from '@/views/device/common/device-prod/index.vue'
import DeviceMaintenance from '@/views/device/common/device-maintenance/index.vue'
import { defaultModel } from '@/api/device/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {
  device_type,
  device_status,
  room_position
} = toRefs<any>(proxy?.useDict('device_type', 'device_status', 'room_position'));

const route = useRoute();
const orderId = toRef<string | null>(route.query.id as string)

const form = reactive({
  model: defaultModel(),
  baseItems: [
    // {prop: "deviceId", label: "设备ID", span: 6},
    // {prop: "deviceNo", label: "设备编号", span: 6},
    // { title: '', type: 'seq', span: 6 },
    // { prop: "deviceId", label: "设备ID", span: 6 },
    // { prop: "deviceNo", label: "设备编号", span: 6 },
    //  
    { prop: "regionName", label: "区域", span: 6 },
    { prop: "vendorName", label: "关联酒店", span: 6 },
    {
      prop: "roomPosition", label: "安装位置", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<span><span style="float:left;">{form.model.room}</span><dict-tag style="float:left;width:50px" options={room_position.value} value={form.model[prop]} /></span>)
      }
    },
    {
      prop: "status", label: "状态", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={device_status.value} value={form.model[prop]} />)
      }
    },

    {
      prop: "qrcode", label: "机器名", span: 6,
    },
    {
      prop: "deviceType", label: "设备类型", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={device_type.value} value={form.model[prop]} />)
      }
    },
    { prop: "deviceName", label: "设备名称", span: 6 },
    { prop: "deviceSecret", label: "密钥信息", span: 6 },

    { prop: "btInfo", label: "蓝牙ID", span: 6 },
    { prop: "ssid", label: "wifi名称", span: 6 },
    { prop: "sspw", label: "wifi密码", span: 6 },
    // { prop: "arrangeTime", label: "安装时间", span: 6 },


    { prop: "macInfo", label: "MAC信息", span: 6 },
    // { prop: "chipInfo", label: "CPU信息（芯片序列号）", span: 6 },
    { prop: "remarks", label: "备注", span: 6 },
    { prop: "image", label: "图片（TODO）", span: 6 },

    // { prop: "stationId", label: "关联站房（仅限泄漏检测终端）", span: 6 },
  ],
})
const loading = ref(false)

/** 取消 */
const handleCancel = () => {
  // proxy?.$tab.closeOpenPage()
  proxy?.$tab.closePage();
}
const getInfo = async (id: string) => {
  loading.value = true
  let res = await getDevice(id)
  loading.value = false
  if (res.code == 200) {
    form.model = res.data
  } else {
    proxy?.$modal.msgError(res.msg || '信息获取失败！')
  }
}
if (orderId.value) {
  getInfo(orderId.value)
}
onMounted(() => {
})
</script>
